<template>
    <div>
        <van-nav-bar title="预约洗衣" left-text="返回" left-arrow class="custom-nav-bar" @click-left="onClickLeft" />
        <div class="car">

            <div class="left">
                <ul class="menu" v-for="item in menulist" :key="item.pro_id">
                    <li @click="changeShop" :data-id="item.type_n">
                        {{ item.type_name }}
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="swipe-gg">
                    <div class="card" v-for="item, index in shoplist" :key="index">
                        <div class="left">
                            <img :src="item.pro_img" mode="" />
                        </div>
                        <div class="right">
                            <div class="title">{{ item.pro_title }}</div>
                            <div class="cost">
                                <div>
                                    <div class="price">￥{{ item.pro_price }}</div>
                                    <div class="before-price">
                                        ￥{{ item.pro_oldprice }}
                                        <div class="line"></div>
                                    </div>
                                </div>
                                <div class="number">
                                    <button class="addCar" v-if="item.pro_num == 0" @click="addCar(item)">
                                        加入购物车
                                    </button>
                                    <van-stepper v-if="item.pro_num > 0" theme="round" button-size="22"
                                        v-model="item.pro_num" min="0" @plus="changeNum(item, 1)"
                                        @minus="changeNum(item, 0)" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部 -->
            <div class="carView-bottom">
                <div class="pic" @click="carPic">
                    <img class="carpic" src="../../assets/icon/icon_car.png" alt="" />
                    <div class="round">{{ state.sum }}</div>
                </div>
                <div class="carView-bottom-price">
                    <div>￥{{ state.totalPrice }}</div>
                    <div class="carView-bottom-text">已省￥1</div>
                </div>
                <div><button class="yuyue" type="button" @click="gosureorder">立即预约</button></div>
            </div>
            <!-- 滑动单元格 -->

            <!-- 弹出层 -->

            <van-popup class="custom-bottom-popup" v-model:show="showBottom" :overlay-style="overlayStyle"
                :style="{ height: '40%' }" position="bottom">
                <div class="wrapper">
                    <div class="block">
                        <div class="head">
                            <div></div>
                            <button class="empty" @click="emptyCar">清空购物车</button>
                        </div>
                        <div>
                            <div class="car-empty" v-if="state.sum == 0">
                                <img src="../../assets/img/l_empty.png" alt="" />
                                <p>购物车空空如也，赶紧选购吧！</p>
                            </div>
                            <!-- 滑动单元格 -->
                            <van-swipe-cell v-for="item, index in Carlist" :key="index">
                                <div class="car-list">
                                    <van-cell :border="false" title="" value="" />
                                    <div class="card" v-if="item.pro_num > 0">
                                        <input class="radio" type="checkbox" v-model="item.ischeck"
                                            @change="checkStatus(index)">&nbsp;&nbsp;
                                        <div class="left">
                                            <img :src="item.pro_img" mode="" />
                                        </div>
                                        <div class="right">
                                            <div class="title">{{ item.pro_title }}</div>
                                            <div class="cost">
                                                <div>
                                                    <div class="price">￥{{ item.pro_price }}</div>
                                                    <div class="before-price">
                                                        ￥{{ item.pro_oldprice }}
                                                        <div class="line"></div>
                                                    </div>
                                                </div>
                                                <div class="number">
                                                    <button class="addCar" v-if="item.pro_num == 0"
                                                        @click="addCar(item)">
                                                        加入购物车
                                                    </button>
                                                    <van-stepper v-if="item.pro_num > 0" theme="round" button-size="22"
                                                        v-model="item.pro_num" min="0" @plus="changeNum(item, 1)"
                                                        @minus="changeNum(item, 0)" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <template #right>
                                    <van-button square type="danger" text="删除" class="deletebtn"
                                        @click="deleteCar(item.pro_id)" />
                                </template>
                            </van-swipe-cell>
                        </div>
                    </div>
                </div>
                <div class="bottom-b">
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue';
import { useRouter } from "vue-router";
import { Http, Token } from "../../utils/request";


interface CarItem {
    pro_id: number;
    pro_img: string;
    pro_title: string;
    pro_price: number;
    ischeck: boolean;
    type_name: string;
    type_n: number;
    pro_num: number;
    pro_oldprice: number
}
// const value = ref(1);
const showBottom = ref(false);
const checkAllStatus = ref(false);

const menulist = ref<CarItem[]>([]);
const shoplist = ref<CarItem[]>([]);
const Carlist = ref<CarItem[]>([]);


const router = useRouter();

const state = reactive({
    sum: 0,
    totalPrice: 0,
});
const params:any = ref([])
// 路由跳转
const onClickLeft = () => { router.push("/"); };
const gosureorder = () =>{ 
   Carlist.value.forEach((item: any) => {
    if (item.pro_num > 0) {
        params.value.push(item)
    }
})
    localStorage.setItem("params", JSON.stringify(params));
    router.push("/sureorder")};
const overlayStyle = computed(() => ({
    background: `linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.7) calc(100% - 170px),
    transparent calc(100% - 170px)
  )`,
}));

// 分类接口
const menuData = () => {
    Http("/api/category", "get", {}).then((res: any) => {
        if (res.status === 200) {
            menulist.value = res.data;
            console.log(menulist);
        }
    });
}

// 产品接口
const shopData = async (index: any) => {
    let res: any = await Http("/api/product", "get", { type_n: index })
    let res1: any = await Token("/api/car", "get", {})
    res.data.forEach((item: any) => {
        item.pro_num = 0
        item.ischeck = false
        res1.data.forEach((item1: any) => {
            if (item.pro_id == item1.pro_id) {
                item.pro_num = item1.pro_num
            }
        });
    });
    shoplist.value = res.data;
}


//获取购物车列表接口
const getCarlist = () => {
    Token("/api/car", "get", {}).then((res: any) => {
        if (res.status === 200) {
            Carlist.value = res.data;
            console.log(Carlist.value);
            let n: number = 0
            res.data.forEach((item: any) => {
                n += Number(item.pro_num)
            });
            state.sum = n
        }
    });
}


//清空购物车接口 /api/carAll
const emptyCarApi = () => {
    Token("/api/carAll", "get", {}).then((res: any) => {
        if (res.status === 200) {
            console.log(res);
            state.totalPrice = 0
            state.sum = 0
        }
    });
}

onMounted(() => {
    menuData()
    shopData(0)
    getCarlist()
})



//菜单栏
const changeShop = (e: any) => {
    shopData(e.target.dataset.id)
}

// 底部弹出层
const carPic = () => {
    showBottom.value = true
    getCarlist()
}

const checkStatus = (index: any) => {
    if (Carlist.value[index].ischeck) {
        state.totalPrice += Number(Carlist.value[index].pro_price) * Number(Carlist.value[index].pro_num)
    }
    else {
        state.totalPrice -= Number(Carlist.value[index].pro_price) * Number(Carlist.value[index].pro_num)
    }
}

// 加入购物车 判断是否登录
const addCar = (item: any) => {
    const token = localStorage.getItem("token");
    if (!token) {
        router.push("/login");
    }
    else {
        joinCar(item)
    }
}

//加入购物车逻辑
const joinCar = (item: any) => {
    item.pro_num += 1
    Token("/api/car", "post", { pro_id: item.pro_id, pro_num: item.pro_num, }).then((res: any) => {
        if (res.status === 200) {
            console.log(res);
            getCarlist()
        }
    });
}

// 加减购物车
const changeNum = async (item: any, flat: number) => {
    if (flat) {
        item.pro_num+=1
    }
    else{
        item.pro_num-=1
    }
    if (item.pro_num <= 0) {
        item.pro_num = 0
        deleteCar(item.pro_id)
    }
    let num = Number(item.pro_num)
    let api = await Token("/api/car", "post", { pro_id: item.pro_id, pro_num: num, }).then((res: any) => {
        if (res.status === 200) {
            console.log(res);

        }
    });
    let fun = await getCarlist()
}

//清空购物车
const emptyCar = () => {
    shopData(0)
    emptyCarApi()
    getCarlist()
    state.sum = 0
    showBottom.value = false;
};

// 删除购物车单个
const deleteCar = (pro_id: any) => {
    Token("/api/car", "delete", { pro_id: pro_id }).then((res: any) => {
        if (res.status === 200) {
            console.log(res);
            getCarlist()
        }
    });
}
</script>
<style lang="less" scoped>
.deletebtn {
    color: #fff;
    position: relative;
    top: 80px;
    height: 150px;
    border-radius: 10px;
}

.car {
    display: flex;
    height: 100vh;

    .left {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #666;
    }

    .right {
        width: 80%;

        .swipe-gg {
            padding: 20px;
            margin: 0 auto;
            height: 200vh;
            border-radius: 20px;
            background-color: #fff;

            .card {
                background-color: white;
                border-radius: 20px;
                box-shadow: 0 0 10px #ccc;
                padding: 15px;
                display: flex;
                margin-bottom: 30px;
                justify-content: space-between;

                .left {
                    width: 200px;
                    height: 180px;
                    // margin-right: 30px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .right {
                    width: 300px;

                    .title {
                        font-size: 30px;
                        margin-bottom: 50px;
                        margin-left: 10px;
                    }

                    .cost {
                        display: flex;
                        justify-content: space-between;

                        .price {
                            font-size: 30px;
                            margin-left: 5px;
                            color: red;
                            font-weight: bold;
                        }

                        .number {
                            width: 160px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 30px;
                            cursor: pointer;

                            .addCar {
                                width: 160px;
                                height: 60px;
                                font-size: 22px;
                                margin-left: 20px;
                                background: rgb(63, 161, 157);
                                color: #fff;
                                text-align: center;
                                border: 1px solid #ccc;
                                border-radius: 50px;
                            }

                            .subtract {
                                width: 40px;
                                height: 40px;
                                text-align: center;
                                font-size: 35px;
                                background: #fff;
                                color: #ccc;
                                text-align: center;
                                border: 1px solid #ccc;
                                border-radius: 50%;
                                margin-left: 10px;
                                position: relative;

                                .subtract-j {
                                    position: absolute;
                                    top: 44%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                }
                            }

                            .add {
                                width: 40px;
                                height: 40px;
                                background: rgb(63, 161, 157);
                                color: #fff;
                                text-align: center;
                                border: 1px solid #ccc;
                                border-radius: 50%;
                                margin-right: 10px;
                                position: relative;

                                .add-j {
                                    position: absolute;
                                    top: 44%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                }
                            }
                        }
                    }

                    .before-price {
                        font-size: 22px;
                        margin-left: 10px;
                        color: #ccc;
                        position: relative;

                        .line {
                            width: 70px;
                            height: 1px;
                            background: #ccc;
                            position: absolute;
                            top: 50%;
                        }
                    }
                }
            }
        }
    }
}


@import url("../car/carView.css");
</style>